<style type="text/css"> 
	div#abgne_marquee {
		background-color:#FFF;
		position: relative;
		overflow: hidden;	/* 超出範圍的部份要隱藏 */
		width: 970px;
		height: 100px;
		border: 0px solid #ccc;
	}
	div#abgne_marquee ul, div#abgne_marquee li {
		margin: 0;
		padding: 0;
		list-style: none;
	}
	div#abgne_marquee ul {
		position: absolute;
		left: 30px;			/* 往後推個 30px */
		width: 930px;
	}
	div#abgne_marquee ul li a {
		display: block;
		overflow: hidden;	/* 超出範圍的部份要隱藏 */
		font-size:20px;
		height: 100px;
		line-height: 32px;
		padding-left: 40px;
		padding-right: 40px;
		text-decoration: none;
	}
	div#abgne_marquee ul li.b1 a {
		background-position: 5px 5px;
	}
	div#abgne_marquee div.marquee_btn {
		position: absolute;
		cursor: pointer;
	}
		div#abgne_marquee div#marquee_next_btn {
		background-color:#FFF;
		height: 100px;
		left: 5px;
	}
	div#abgne_marquee div#marquee_prev_btn {		
		background-color:#FFF;
		height: 100px;
		right: 5px;
		display:table-cell; 
		text-align:center;
		vertical-align:middle;
	}
</style> 
<script type="text/javascript"> 
	$(function(){
		// 先取得 div#abgne_marquee ul
		// 接著把 ul 中的 li 項目再重覆加入 ul 中(等於有兩組內容)
		// 再來取得 div#abgne_marquee 的高來決定每次跑馬燈移動的距離
		// 設定跑馬燈移動的速度及輪播的速度
		var $marqueeUl = $('div#abgne_marquee ul'),
			$marqueeli = $marqueeUl.append($marqueeUl.html()).children(),
			_height = $('div#abgne_marquee').height() * -1,
			scrollSpeed = 600,
			timer,
			speed = 3000 + scrollSpeed,
			direction = 0,	// 0 表示往上, 1 表示往下
			_lock = false;
 
		// 先把 $marqueeli 移動到第二組
		$marqueeUl.css('top', $marqueeli.length / 2 * _height);
		
		// 幫左邊 $marqueeli 加上 hover 事件
		// 當滑鼠移入時停止計時器；反之則啟動
		$marqueeli.hover(function(){
			clearTimeout(timer);
		}, function(){
			timer = setTimeout(showad, speed);
		});
		
		// 判斷要往上還是往下
		$('div#abgne_marquee .marquee_btn').click(function(){
			if(_lock) return;
			clearTimeout(timer);
			direction = $(this).attr('id') == 'marquee_next_btn' ? 0 : 1;
			showad();
		});
		
		// 控制跑馬燈上下移動的處理函式
		function showad(){
			_lock = !_lock;
			var _now = $marqueeUl.position().top / _height;
			_now = (direction ? _now - 1 + $marqueeli.length : _now + 1)  % $marqueeli.length;
			
			// $marqueeUl 移動
			$marqueeUl.animate({
				top: _now * _height
			}, scrollSpeed, function(){
				// 如果已經移動到第二組時...則馬上把 top 設回到第一組的最後一筆
				// 藉此產生不間斷的輪播
				if(_now == $marqueeli.length - 1){
					$marqueeUl.css('top', $marqueeli.length / 2 * _height - _height);
				}else if(_now == 0){
					$marqueeUl.css('top', $marqueeli.length / 2 * _height);
				}
				_lock = !_lock;
			});
			
			// 再啟動計時器
			timer = setTimeout(showad, speed);
		}
		
		// 啟動計時器
		timer = setTimeout(showad, speed);
 
		$('a').focus(function(){
			this.blur();
		});
	});
</script> 
  
   	<div id="abgne_marquee"> 
 
 <div class="marquee_btn" id="marquee_next_btn"><br /><br /><img src="images/arrow-down.png" /></div> 
		<ul> 
			{php $tmp = "";}
                            {loop $dataarray $n $r}
                            {php if ($tmp==$r['title'] || $r['filepath']=="") continue;}
                            {php $r['group_buynum']=$r['group_buynum']+$r['group_startnum'];}
                            {php $r['group_usernum']=$r['group_usernum']+$r['group_startnum'];}                            
			<li class="b1">
            <table border="0" cellpadding="1" cellspacing="0" height="100%">
            <tr bgcolor="#FFFFFF"><td>
<a href="view.php?gid={$r['gid']}"><img src="{$r['filepath']}" border="0" height="90"></a></td>
<td><a href="view.php?gid={$r['gid']}">{$r['title']}</a></td></tr>
</table>
</li> 
            
              {php $tmp=$r['title'];}
                     {/loop}
		</ul> 
		<div class="marquee_btn" id="marquee_prev_btn"><br /><br /><img src="images/arrow-up.png" /></div> 
</div>
<br />